﻿<d3:PositionalViewportUIContainer x:Class="Microsoft.Research.DynamicDataDisplay.Charts.Shapes.DraggablePoint"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	xmlns:d3="clr-namespace:Microsoft.Research.DynamicDataDisplay.Charts"
	xmlns:d3core="clr-namespace:Microsoft.Research.DynamicDataDisplay"
	ToolTip="{Binding Position, RelativeSource={RelativeSource Self}}">

    <d3:PositionalViewportUIContainer.Style>
        <Style TargetType="{x:Type d3:PositionalViewportUIContainer}">
            <Style.Resources>
                <Storyboard x:Key="story">
                    <DoubleAnimation Storyboard.TargetProperty="Opacity" 
									 From="1" 
									 To="0.1" Duration="0:0:0.4" AutoReverse="True"
									 RepeatBehavior="Forever"/>
                </Storyboard>
            </Style.Resources>

            <Setter Property="Focusable" Value="False"/>
            <Setter Property="Opacity" Value="1"/>
            <Setter Property="Cursor" Value="ScrollAll"/>
            <Setter Property="HorizontalContentAlignment" Value="Center"/>
            <Setter Property="VerticalContentAlignment" Value="Center"/>

            <Style.Triggers>
                <MultiTrigger>
                    <MultiTrigger.Conditions>
                        <Condition Property="IsMouseOver" Value="True"/>
                        <Condition Property="IsMouseCaptured" Value="False"/>
                    </MultiTrigger.Conditions>
                    <MultiTrigger.EnterActions>
                        <BeginStoryboard Name="storyboard" Storyboard="{StaticResource story}"/>
                    </MultiTrigger.EnterActions>
                    <MultiTrigger.ExitActions>
                        <RemoveStoryboard BeginStoryboardName="storyboard"/>
                    </MultiTrigger.ExitActions>
                </MultiTrigger>
            </Style.Triggers>
        </Style>
    </d3:PositionalViewportUIContainer.Style>

    <Grid Width="12" Height="12">
        <Ellipse Width="3" Height="3" Fill="Black"/>
        <Ellipse Width="12" Height="12" Fill="Transparent" Stroke="Black"/>
    </Grid>
</d3:PositionalViewportUIContainer>
